<template>
    <el-dialog v-model="visible" :title="title" :width="width" @close="resetForm" @open="init" :close-on-press-escape="false">
        <el-form label-width="122px" label-position="left" label-suffix="：" :model="classify" ref="formRef" :rules="rules">
            <el-form-item label="流程类别名称" prop="name">
                <el-input v-model="classify.name" placeholder="请输入流程类别名称"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="default" @click="visible=false">取消</el-button>
            <template v-if="type===0">
                <el-button type="primary" @click="submitAdd">确认添加</el-button>
            </template>
            <template v-else>
                <el-button type="primary" @click="submitUpdate">确认修改</el-button>
            </template>
        </template>
    </el-dialog>
</template>

<script>
    import {ElMessage} from "element-plus";
    import {addProClassify, hasSomeNameProClassify, updateProClassify} from "../../../../network/sys/processClassify";
    import {getCurrentInstance, reactive, ref, toRefs} from "vue";

    export default {
        name: "ProcessClassifyForm",
        emits:['refresh-data'],
        props:{
            width: ''
        },
        setup(props,{emit}){
            const globalProperties = getCurrentInstance()?.appContext.config.globalProperties;//全局属性
            const visible = ref(false);//是否展示
            const formRef = ref(null);
            const validateName = (rule,value,callback)=>{
                hasSomeNameProClassify({
                    id: form.classify.id,
                    name: value
                }).then(vo=>{
                    if(vo){
                        callback(new Error('已存在同名流程类别。'))
                    }
                    callback();
                })
            }
            const form = reactive({
                classify:{
                    id: null,
                    name: null
                },
                rules: {
                    name: [
                        {required: true, message: '请输入流程类别名称',trigger: 'blur'},
                        {validator: validateName, trigger: 'blur'}
                    ]
                },
                resetForm(){
                    formRef.value.resetFields();
                    formRef.value.clearValidate();
                    // console.log('重置后数据',form.classify);
                },
                setClassify({id,name}){
                    form.classify.id = id;
                    form.classify.name = name;
                },
                submitAdd(){
                    formRef.value.validate((valid)=>{
                        if(valid){
                            addProClassify({
                                name: form.classify.name
                            }).then(data=>{
                                globalProperties.$response.handle({
                                    data: data,
                                    success: '添加成功',
                                    error: '添加失败',
                                    successFn: ()=>{
                                        visible.value = false;
                                        emit('refresh-data')//刷新数据表格
                                    }
                                })
                            })
                        }else{
                            ElMessage.error('表单还未完善!')
                        }
                    })
                },
                submitUpdate(){
                    formRef.value.validate((valid)=> {
                        if (valid) {
                            updateProClassify({
                                id: this.classify.id,
                                name: this.classify.name
                            }).then(vo=>{
                                globalProperties.$response.handle({
                                    data: vo,
                                    success: '添加成功',
                                    error: '修改失败',
                                    successFn: ()=>{
                                        visible.value = false;
                                        emit('refresh-data');
                                    }
                                })
                            })
                        }else{
                            ElMessage.error('表单还未完善!')
                        }
                    })
                },
            })
            return{
                visible,
                formRef,
                ...toRefs(form)
            }
        },
        data(){
            return{
                type: 0,//0为添加表单，1为修改表单
                title: '',//表单名称
            }
        },
        methods:{
            init(){

            }
        },
        created() {
            this.init();
        }
    }
</script>

<style scoped>
    .el-select-dropdown__item{
        width: 100%;
    }
    .explain{
        font-size: 12px;
        color: #a1a1a1;
    }
</style>
<style>
    .el-cascader-node{
        width: 100%;
    }
    .el-scrollbar__view{
        width: 180px;
    }
</style>
